<template>
  <el-dialog
    class="dialog"
    ref="myDialog"
    :title="dialogTitle"
    :visible="dialogVisible"
    :width="dialogWidth"
    :before-close="dialogBeforeClose"
    :close-on-click-modal="false"
  >
    <dialog-content
      class="dialog-content"
      v-bind="$data"
      ref="content"
    ></dialog-content>
    <div v-show="buttonShow" class="dialog-button">
      <el-button type="primary" @click="close(true)">确 定</el-button>
      <el-button @click="close(false)" type="primary" plain>{{
        closeText
      }}</el-button>
    </div>
  </el-dialog>
</template>
<script>
export default {
  data() {
    return {
      // 弹框默认设置项
      buttonShow: true,
      dialogTitle: "",
      dialogVisible: true,
      beforeClose: null,
      dialogWidth: "50%",
      closeText: "取消",
    };
  },
  methods: {
    done() {
      this.dialogVisible = false;
    },
    dialogBeforeClose() {
      this.close(false);
    },
    /**
     * 关闭按钮
     */
    close(flag) {
      if (this.beforeClose && this.beforeClose.constructor == Function) {
        this.beforeClose.call(this.parent, flag, this.$refs.content, this.done);
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.dialog {
  .dialog-content {
    padding-bottom: 20px;
  }
  .dialog-button {
    display: flex;
    justify-content: flex-end;
  }
}
</style>
